<script setup>
import { ref } from 'vue'

const formData = ref({
  name: '',
  email: '',
  password: ''
})
const confirmPassword = ref('')
const errorMessage = ref('')
const successMessage = ref('')

const validateForm = () => {
  if (!formData.value.name || !formData.value.email || !formData.value.password) {
    errorMessage.value = '所有字段必须填写'
    return false
  }
  
  if (formData.value.password !== confirmPassword.value) {
    errorMessage.value = '两次密码输入不一致'
    return false
  }
  
  if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(formData.value.email)) {
    errorMessage.value = '邮箱格式不正确'
    return false
  }
  
  errorMessage.value = ''
  return true
}

const handleSubmit = async (e) => {
  e.preventDefault()
  
  if (!validateForm()) return

  try {
    const response = await fetch('http://localhost:8080/api/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: formData.value.name,
        email: formData.value.email,
        password: formData.value.password
      })
    })

    const result = await response.json()
    
    if (!response.ok) {
      throw new Error(result.message || '注册失败')
    }

    successMessage.value = '注册成功！'
    formData.value = { name: '', email: '', password: '' }
    confirmPassword.value = ''
    setTimeout(() => successMessage.value = '', 3000)
  } catch (error) {
    errorMessage.value = error.message
    setTimeout(() => errorMessage.value = '', 3000)
  }
}
</script>

<template>
  <div class="register-container">
    <h2>用户注册</h2>
    
    <div v-if="errorMessage" class="alert error">
      {{ errorMessage }}
    </div>
    
    <div v-if="successMessage" class="alert success">
      {{ successMessage }}
    </div>

    <form @submit="handleSubmit">
      <div class="form-group">
        <label>用户名：</label>
        <input 
          type="text" 
          v-model="formData.name" 
          placeholder="请输入用户名"
        >
      </div>

      <div class="form-group">
        <label>电子邮箱：</label>
        <input
          type="email"
          v-model="formData.email"
          placeholder="example@domain.com"
        >
      </div>

      <div class="form-group">
        <label>密码：</label>
        <input
          type="password"
          v-model="formData.password"
          placeholder="至少6位密码"
        >
      </div>

      <div class="form-group">
        <label>确认密码：</label>
        <input
          type="password"
          v-model="confirmPassword"
          placeholder="再次输入密码"
        >
      </div>

      <button type="submit" class="submit-btn">立即注册</button>
    </form>
  </div>
</template>

<style scoped>
.register-container {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #666;
}

input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.submit-btn {
  width: 100%;
  padding: 1rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
}

.submit-btn:hover {
  background-color: #0056b3;
}

.alert {
  padding: 0.8rem;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.error {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

.success {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}
</style>